<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>运营中心</title>
		<link href="css/common.css" rel="stylesheet" type="text/css" />
		<link href="css/normolize.css" rel="stylesheet" type="text/css" />
		<link href="css/style.css" rel="stylesheet" type="text/css" />
		<!--[if IE 9]> <link href="css/ieHack9.css" rel="stylesheet" type="text/css" /> <![endif]-->
		<!--[if IE 8]> <link href="css/ieHack.css" rel="stylesheet" type="text/css" /><link href="css/ieHack8.css" rel="stylesheet" type="text/css" /> <![endif]-->
		<!--[if lte IE 7]> <link href="css/ieHack.css" rel="stylesheet" type="text/css" /> <![endif]-->
		<style>
			body {
				background: #fff;
			}
			
			.filter-list {
				margin: 20px 40px;
				padding: 0 10px 10px 10px;
				transition: all .2s ease-in-out;
				-webkit-transition: all .2s ease-in-out;
				-moz-transition: all .2s ease-in-out;
				-ms-transition: all .2s ease-in-out;
			}
			
			.filter-list .item {
				padding-top: 10px;
				padding-bottom: 7px;
			}
			
			.filter_name {
				width: 80px;
				text-align: right;
				margin-right: 8px;
			}
			
			.filter-list li {
				padding: 0px 8px;
				height: 23px;
				line-height: 23px;
				margin: 0 12px;
				cursor: pointer;
			}
			
			.filter-content {
				margin: 0px 30px;
				margin-top: -10px;
				overflow: hidden;
				transition: all .2s ease-in-out;
				-webkit-transition: all .2s ease-in-out;
				-moz-transition: all .2s ease-in-out;
				-ms-transition: all .2s ease-in-out;
			}
			
			.filter-content .item {
				width: 163.6px;
				height: 220px;
				border: 1px solid #ddd;
				margin: 10px;
				float: left;
				position: relative;
			}
			
			.filter-content .item .name {
				margin-left: 5px;
				margin-top: 3px;
			}
			
			.filter-content .item .price {
				margin-top: 5px;
				margin-right: 5px;
				font-size: 12px;
			}
			
			.filter-list li:hover i.remove {
				height: 23px;
				background: url(images/iconlist.png) no-repeat;
				width: 20px;
				display: inline-block;
				vertical-align: middle;
				background-position: -209px -307px;
			}
			
			.transition {
				transition: all .3s ease-in;
				-webkit-transition: all .3s ease-in;
				-moz-transition: all .3s ease-in;
				-ms-transition: all .3s ease-in;
			}
			
			.filter-content .item .operation {
				transform: translate(0, 110%);
				-webkit-transform: translate(0, 110%);
				-moz-transform: translate(0, 110%);
				-ms-transform: translate(0, 110%);
			}
			
			.filter-content .item:hover .operation {
				transform: translate(0, 0%);
				-webkit-transform: translate(0, 0%);
				-moz-transform: translate(0, 0%);
				-ms-transform: translate(0, 0%);
			}
			
			.filter-content .item:hover .operation .ct {
				transform: translate(0, 0%);
				-webkit-transform: translate(0, 0%);
				-moz-transform: translate(0, 0%);
				-ms-transform: translate(0, 0%);
			}
			
			.filter-content .item .operation.confirmchoose,
			.filter-content .item .operation.confirmchoose .ct {
				transform: translate(0, 120%);
				-webkit-transform: translate(0, 120%);
				-moz-transform: translate(0, 120%);
				-ms-transform: translate(0, 120%);
			}
			
			.filter-content .item .result,
			.filter-content .item .result .confirmCircle {
				transform: scale(0, 0);
				-webkit-transform: scale(0, 0);
				-ms-transform: scale(0, 0);
				-moz-transform: scale(0, 0);
			}
			
			.filter-content .item .result.confirmchoose,
			.filter-content .item .result.confirmchoose .confirmCircle {
				text-align: center;
				transform: scale(1, 1);
				-webkit-transform: scale(1, 1);
				-ms-transform: scale(1, 1);
				-moz-transform: scale(1, 1);
			}
			
			.black_bg {
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				background: rgba(0, 0, 0, 0.5);
				z-index: 2;
			}
			
			.filter-content .item .black_bg .button {
				width: 42px;
				height: 14px;
				padding: 7px 8px;
				color: #fff;
				z-index: 3;
				position: relative;
				text-align: center;
				cursor: pointer;
			}
			
			.filter-content .item .black_bg .button:hover {
				border-bottom: 1px solid #fff;
			}
			
			.border-white-top {
				border-top: 1px solid #fff;
			}
			
			.vertical-line {
				display: inline-block;
				line-height: 1.4em;
				vertical-align: middle;
				width: 100%;
			}
			
			.close {
				position: absolute;
				width: 16px;
				height: 16px;
				right: 0px;
				right: 10px;
				font-size: 12px;
				background: url(images/iconlist.png) no-repeat !important;
				background-position: -220px -201px !important;
				margin-top: -3.5px;
				top: 14px;
			}
			
			.filecontainer {
				position: relative;
				width: 99px;
				height: 30px;
			}
			
			.filecontainer input.file,
			.filecontainer input.text {
				padding: 0px;
				width:99px;
				height:30px !important;
				position: absolute;
				left: 0px;
				top: 0px;
				text-align: center;
			}
			 input.text{
			 	height:30px !important;
			 }
			.filecontainer .file {
				opacity: 0;
				z-index: 2;
			}
			.filecontainer .showFileName{margin-left:140px;width:100px;line-height: 30px;}
			.mt13{margin-top:13px;} .mt20{margin-top:30px;}
			.Wt300{width:300px !important;}
			.defaultimg{width:152px;}
			.aitem{background:#eee;padding:20px;}
			.layui-layer-hui .layui-layer-content{color:#fff;}
		</style>
	</head>

	<body>
		<div class="layui-layer-title" style="position:relative;width:100%;background:#14a2d7 !important;height:39px;line-height: 39px;color:#fff;padding: 0 80px 0 20px;" move="ok">
			选择活动
			<a class="close" href="javascript:;" onclick="hide()"></a>
		</div>
		<div class="tablist">
			<ul>
				<li class="tabItem active">
					<a href="javascript:;" onclick="ajaxTheme(1,this)">公共主题</a>
				</li>
				<li class="tabItem">
					<a href="javascript:;" onclick="ajaxTheme(2,this)">定制主题</a>
				</li>
				<li class="tabItem">
					<a href="javascript:;" onclick="ajaxTheme(3,this)">未来式</a>
				</li>
			</ul>
		</div>

        <input type="hidden" value="" name="id"  id="aid"/>
		<div class="">
			<div class="row filter-list over-hidden border">
				<div class="item over-hidden" data-cateid='1'>
					<label class=" filter_name inline-block fl" data-key="color">风格：</label>
					<ul class=" fl">
						<li class="bgblue selectedAll">全部</li>
						<li class="" data-id="1">大荒缘</li>
						<li class="" data-id="3">劲酒</li>
						<li class="" data-id="2">习水大曲</li>
						<li class="" data-id="4">节假日</li>
						<li class="" data-id="5">简约</li>
					</ul>
				</div>

				<div class="item over-hidden" data-cateid='2'>
					<label class=" filter_name inline-block fl" data-key="color">收费方式：</label>
					<ul class="fl">
						<li class="bgblue selectedAll">全部</li>
						<li class="" data-id="6">收费</li>
						<li class="" data-id="7">免费</li>
					</ul>
				</div>

				<div class="over-hidden resultFilters" style="padding-top: 10px;padding-bottom: 7px;">
					<label class=" filter_name inline-block fl" data-key="color">已选条件：</label>
					<div class="fl nofilter" style="color:#999;padding-left:12px;">暂时没有选择过滤条件</div>
					<ul class="fl">

					</ul>
				</div>

			</div>

			<div class="filter-content row" id="itemContainer">
				<div class="item ">
					<img class="lazy" data-original="images/yunying/product.png" height="168">
					<p class="name">618年终大促</p>
					<p class="red fr price">￥5</p>

					<div class="black_bg result  transition" style="line-height:218px;text-align: center;">
						<div class="confirmCircle  transition">
							<img src="images/gou.png" style="vertical-align: middle;" />
						</div>
					</div>

					<div class="black_bg operation transition" style="line-height:218px;">
						<div class="text-center vertical-line ">
							<div class="ct transition">
								<p style="color:#fff;margin-bottom:20px;">618年终大促</p>
								<div class=" border-white-top">
									<span class="button" onclick="edit(this)"><i class="icon icon_edit white"></i>编辑</span>
									<span class="button" onclick="choose(this)"><i class="icon icon_choose white"></i>选择</span>
								</div>
							</div>

						</div>
						<i class="inline-block" style="vertical-align: middle;">&nbsp;</i>
					</div>
				</div>

				<div class="item ">
					<img class="lazy" data-original="images/yunying/product.png" height="168">
					<p class="name">111年终大促</p>
					<p class="red fr price">￥5</p>

					<div class="black_bg result  transition" style="line-height:218px;text-align: center;">
						<div class="confirmCircle  transition">
							<img src="images/gou.png" style="vertical-align: middle;" />
						</div>
					</div>

					<div class="black_bg operation transition" style="line-height:218px;">
						<div class="text-center vertical-line ">
							<div class="ct transition">
								<p style="color:#fff;margin-bottom:20px;">618年终大促</p>
								<div class=" border-white-top">
									<span class="button" onclick="edit(this)"><i class="icon icon_edit white"></i>编辑</span>
									<span class="button" onclick="choose(this)"><i class="icon icon_choose white"></i>选择</span>
								</div>
							</div>

						</div>
						<i class="inline-block" style="vertical-align: middle;">&nbsp;</i>
					</div>
				</div>

				<div class="item ">
					<img class="lazy" data-original="images/yunying/product.png" height="168">
					<p class="name">618年终大促</p>
					<p class="red fr price">￥5</p>

					<div class="black_bg result  transition" style="line-height:218px;text-align: center;">
						<div class="confirmCircle  transition">
							<img src="images/gou.png" style="vertical-align: middle;" />
						</div>
					</div>

					<div class="black_bg operation transition" style="line-height:218px;">
						<div class="text-center vertical-line ">
							<div class="ct transition">
								<p style="color:#fff;margin-bottom:20px;">618年终大促</p>
								<div class=" border-white-top">
									<span class="button" onclick="edit(this)"><i class="icon icon_edit white"></i>编辑</span>
									<span class="button" onclick="choose(this)"><i class="icon icon_choose white"></i>选择</span>
								</div>
							</div>

						</div>
						<i class="inline-block" style="vertical-align: middle;">&nbsp;</i>
					</div>
				</div>
			</div>
			<div class="pagelist fr" style="margin:30px 40px 40px 0;">
				<div class=" pagedesc fl">当前<span class="currentPage"></span>/<span class="totalpage"></span>，每页<span class="perpage"></span>条，共<span class="totalnumber"></span>条</div>
				<div class="pagination inline-block fl"></div>
				<div class="inline-block fl">
					到第<input type="text" value="" class="gotopage" />页 <input type="button" value="跳转" class="search-input-button border-radius bgblue gotopage_button"></span>
				</div>

			</div>

		</div>

		<script src="js/jquery-1.8.2.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/page/jPages.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/js.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/page/pageFun.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/yunying.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/jquery.lazyload.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/layer/layer.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/layFun.js" type="text/javascript" charset="utf-8"></script>

		<script>
			$(function() {
				$("img.lazy").lazyload({
					effect: "fadeIn"
				});

				$('.item').each(function() {
					var _self = $(this);
					var flag = $(_self).find('.operation').hasClass('confirmchoose');
					$(_self).hover(function() {
						$(_self).find('.operation').removeClass('confirmchoose');
					}, function() {
						if(flag) {
							$(_self).find('.operation').addClass('confirmchoose');
						}
					});
				});

				var pageObj = new pageFun();
				var currentpage = 1,
					perPage = 10,
					totalNumber = 50;
				pageObj.pageNoObj = $('#pageNo');
				//这里是异步的获取数据的函数
				pageObj.submitFun = function(currentpage) {
						perPage=3;totalNumber = 3;
						var data = [{
							'id': 1,
							'name': '666年终大促' + currentpage,
							'img': 'images/yunying/product.png',
							'price': '6000',

						}, {
							'id': 2,
							'name': '618年终大促' + currentpage,
							'img': 'images/yunying/product.png',
							'price': '9000',

						}, {
							'id': 3,
							'name': '好酒买买提葡萄牙膏' + currentpage,
							'img': 'images/yunying/product.png',
							'price': '3000',
						}];
						//返回新的数组
						formHtml(data);
						
//						pageObj.init(1, 1, 3, 'itemContainer');
					}
					/*参数每页多少个,当前页,总个数,容器的ID*/
				pageObj.init(perPage, currentpage, totalNumber, 'itemContainer');
			});

			function formHtml(data) {
				var html = '';
				for(var i = 0; i < data.length; i++) {
					html += '<div class="item"> <img class="lazy" src="images/grey.gif" data-original="' + data[i].img + '" height="168" width="161.6"> <p class="name text-ellipsis">' + data[i].name + '</p> <p class="red fr price">￥' + data[i].price + '</p> </div>';
				};
				$('.filter-content').html(html);
				$("img.lazy").lazyload({
					effect: "fadeIn"
				});
			}

			function ajaxTheme(type, obj) {
				$('.tabItem').removClass('active');
				$(obj).parent.addClass('active');
				var data = [{
					'id': 1,
					'name': '618年终大促' + currentpage,
					'img': 'images/yunying/product.png',
					'price': '6000',

				}, {
					'id': 2,
					'name': '618年终大促' + currentpage,
					'img': 'images/yunying/product.png',
					'price': '9000',

				}, {
					'id': 3,
					'name': '好酒买买提葡萄牙膏' + currentpage,
					'img': 'images/yunying/product.png',
					'price': '3000',
				}];
				//返回新的数组
				formHtml(data);
			}

			//------------------这里是筛选方法
			var filterevent = new FilterObj();
			filterevent.ajaxGetData = function() {
				var selectArr = filterevent.selectArr;
				for(key in selectArr) {
					// selectArr[key]['name']是获取筛选的内容
					// selectArr[key]['id']是获取筛选的ID
				}
			}
			filterevent.filter();

			//删除筛选条件
			function removeFilter(obj) {
				filterevent.removeFilter(obj);
			}

			var themeId;
			//------------------这里是确定选择主题
			function choose(obj) {
				themeId = $(obj).attr('data-id');
				var contentHtml='<div class="form" style="padding:20px 40px;"> <form class="block-form" id="commentForm"> <div style="border:1px solid #ddd;padding:40px;"> <div> <label>微信短首次登陆是否需要手机短信验证：</label> <input type="radio" class="radio" checked="checked" name="isvalidate"  value="1"/>是 <input type="radio" class="radio" name="isvalidate" value="2" />否 </div>   <div> <label>是否支持非微信客户端扫码：</label> <input type="radio" class="radio" checked="checked" name="iswechat"  value="1"/>是 <input type="radio" class="radio" name="iswechat" value="2" />否 </div> </div>  <div class="fr" style="margin-top:20px;"> <input type="button" value="提交并设置" class="search-input-button bgblue" id="subButton" /> <input type="button" value="返回" class="search-input-button " id="backButton" style="margin-right:0px;" /> </div> </form> </div>';
				layObj.content( 537, 300,'高级设置',contentHtml, '',  setFun);
				var operationObj = $(obj).parent().parent().parent().parent();
				operationObj.addClass('confirmchoose');
				operationObj.prev().addClass('confirmchoose');
			}

			//处理高级设置的函数
			function setFun(layero,index) {
				//给父页面传值
				$("body").find('#subButton').on('click', function() {
					var iswechat = $("body").find('input[name="iswechat"]:checked').val();
					var isvalidate = $("body").find('input[name="isvalidate"]:checked').val();
					ajaxAdvancedSet(iswechat, isvalidate, themeId,index);
				});
				$("body").find("#backButton").on('click', function() {
					layer.close(index);
				});
			}

			/* iswechat:设置是否需要短信的参数,isvalidate设置是否需要微信验证的参数,themeId:选择的主题的ID,index:弹框的序号 */
			function ajaxAdvancedSet(iswechat, isvalidate, themeId,index ) {
				console.log(iswechat+" "+isvalidate);
				layer.close(index);
			}

			//------------------这里是确定选择主题
		   var cloneNode;
           var itemlist='';
           var itemlength,count=5;
           $(function(){
	           	$('#selectfile').change(function(){
	        		commonObj.selectfile(this);
	        	})
           })
           
//			function edit(obj) {
//				themeId = $(obj).attr('data-id');
//				layObj.open('themeEdit.html', 740, 546, '上传图片', themeEdit);
//				var html='<div class="form" style="padding:20px 40px;"> <form class="block-form" id="commentForm"> <div class="itemlist"> <div class="border over-hidden aitem first"> <div class="fl"> <div class="filecontainer"> <input type="file" onchange="aa(this)" class=" file  border-radius"  accept="" /> <input type="button" class=" text border-radius bgblue"   disabled="" value="选择上传" /> <span class="showFileName inline-block text-ellipsis " id="filename"  >未选择文件</span> </div> <p class="red mt13">上传的广告图比例：宽640px * 高340px</p> <input type="text" placeholder="请填写链接地址"  class="mt13 Wt300"  /> <div class="mt13"> <input type="button" class=" text text-center border-radius bgblue addPic"  value="添加一项" onclick="add(this)" /> <input type="button" class=" text text-center border-radius bgblue delePic none"  value="删除一项" onclick="deleteObj(this)" /> </div> </div>  <div class="fr"> <img src="images/defaultImg.png" class="defaultimg"/> </div>  </div>    </div>  <div class="clearfix"></div>  <div class="fr" style="margin-top:20px;margin-bottom:20px;"> <input type="button" value="提交并设置" class="search-input-button bgblue" id="subButton" /> <input type="button" value="返回" class="search-input-button " id="backButton" style="margin-right:0px;" /> </div> </form> </div>';
//			    layObj.content( 740, 546, '上传图片',html,'' ,themeEdit);
//				
//			}
			
			function edit(obj) {
				themeId = $(obj).attr('data-id');
				layObj.open('addTheme.html', 920, 640, '主题设置', themeEdit);
//				var html='<div class="form" style="padding:20px 40px;"> <form class="block-form" id="commentForm"> <div class="itemlist"> <div class="border over-hidden aitem first"> <div class="fl"> <div class="filecontainer"> <input type="file" onchange="aa(this)" class=" file  border-radius"  accept="" /> <input type="button" class=" text border-radius bgblue"   disabled="" value="选择上传" /> <span class="showFileName inline-block text-ellipsis " id="filename"  >未选择文件</span> </div> <p class="red mt13">上传的广告图比例：宽640px * 高340px</p> <input type="text" placeholder="请填写链接地址"  class="mt13 Wt300"  /> <div class="mt13"> <input type="button" class=" text text-center border-radius bgblue addPic"  value="添加一项" onclick="add(this)" /> <input type="button" class=" text text-center border-radius bgblue delePic none"  value="删除一项" onclick="deleteObj(this)" /> </div> </div>  <div class="fr"> <img src="images/defaultImg.png" class="defaultimg"/> </div>  </div>    </div>  <div class="clearfix"></div>  <div class="fr" style="margin-top:20px;margin-bottom:20px;"> <input type="button" value="提交并设置" class="search-input-button bgblue" id="subButton" /> <input type="button" value="返回" class="search-input-button " id="backButton" style="margin-right:0px;" /> </div> </form> </div>';
			    layObj.content( 920, 640, '上传图片',html,'' ,themeEdit);
				
			}
			
			
			function aa(obj){
				var e = e || window.event; /*浏览器兼容性*/
				commonObj.selectfile(obj);
				handleFileSelect(e);
			}
			function handleFileSelect(e){
				console.log('reeeee');
			}
			
			
			function themeEdit(layero, index) {
				
				
				//给父页面传值
				$('body').find('#subButton').on('click', function() {
					layer.close(index);
				});
				$('body').find("#backButton").on('click', function() {
					layer.close(index);
				});
			}
           function add(obj){
           		itemlist=$('body').find('.itemlist');
           	    cloneNode=$('body').find('.aitem.first').clone();
           	    
           		$(cloneNode).addClass('mt20'); $(cloneNode).removeClass('first');
           		$(cloneNode).find('.addPic').addClass('none');
           		$(cloneNode).find('.delePic').removeClass('none');
           		 
				
           	   itemlength=$(itemlist).find('.aitem').length;
           	   if(itemlength<count){
           	   	 $(cloneNode).appendTo($(itemlist));
           	   }else{
           	   	 layObj.msg('最多只能添加5个图片！');
           	   }
           	   
           }
           
           function deleteObj(obj){
              $(obj).parent().parent().parent().remove();
           }

			function hide() {
				var index = parent.layer.getFrameIndex(window.name); /*获取窗口索引*/
				parent.layer.close(index);
			}
			
			
		   
		</script>

	</body>

</html>